<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echartsJs/echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            display: block;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <script>

        //第一个柱状图
        let chartDom = document.getElementById("box1");
        let myChart = echarts.init(chartDom);
        let option = {
            title: {//包含猪标题和副标题
                text: "每周销售量",//主标题文本，支持使用\n换行
                link: "https://www.baidu.com",//主标题文本超链接。
                subtext: "2022年11月的天气",//副标题文本，支持使用 \n 换行。
                left: "left",//'left', 'center', 'right'
                // left:30
            },
            legend: {//数据交互按钮

            },
            //对于直角坐标系而言，如果没有单独设置，x和y都是直接以渲染数据对应的data的每项数组进行坐标系定义
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                name: "星期",//坐标轴名称。
                nameTextStyle: {//坐标轴名称的文字样式
                    color: "red"
                },
                axisLabel: {//坐标轴刻度标签的相关设置。
                    interval: 1,//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                    rotate: 45
                },
                type: "category"//类目轴
            },
            yAxis: {//y轴
                type: "value"//数值轴
            },
            series: [{
                name: "销量",
                type: "bar",//type设置当前图形的类型，但设置需要注意不同的图形需要不同的数据展示规则
                data: [5, 20, 36, 10, 80, 20, 90]//描述当前图形所需要渲染和展示的相关数据，对于柱状图而言，只需要提供一个简单的数组数值即可
            }]

        };
        myChart.setOption(option);

        //第二个图
        let chartDom2 = document.getElementById("box2");
        let myChart2 = echarts.init(chartDom2);
        let option2 = {
            title: {//包含猪标题和副标题
                text: "每周气温",//主标题文本，支持使用\n换行
                link: "https://www.baidu.com",//主标题文本超链接。
                // subtext: "2022年11月的天气",//副标题文本，支持使用 \n 换行。
                left: "left",//'left', 'center', 'right'
                // left:30
            },
            legend: {//数据交互按钮，该配置中data的数据要和series中的name名称一一对应
                show:true,
                data:["最高温度","最低温度"],
                top:20
            },
            //对于直角坐标系而言，如果没有单独设置，x和y都是直接以渲染数据对应的data的每项数组进行坐标系定义
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                name: "星期",//坐标轴名称。
                nameTextStyle: {//坐标轴名称的文字样式
                    color: "red"
                },
                axisLabel: {//坐标轴刻度标签的相关设置。
                    interval: 1,//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                    rotate: 45
                },
                type: "category"//类目轴
            },
            yAxis: {//y轴
                name:"°C",
                nameTextStyle: {//坐标轴名称的文字样式
                    color: "red"
                },
                type: "value"//数值轴
            },
            series: [
                {
                    name: "最高温度",
                    type: "bar",//折线图
                    data: [15, 20, 36, 10, 40, 20, 30],
                    label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        show:true,
                        position:"top",//该文本标签的位置
                        formatter:function(params){//自定义文本内容的格式
                            return params.data+"°C";
                        }
                    }
                },
                {
                    name: "最低温度",
                    type: "bar",
                    data: [5, 10, 16, 1, 10, 10, 9],
                    label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        show:true,
                        position:"top",//该文本标签的位置
                        formatter:"{c}°C"//{a}：系列名。{b}：数据名。{c}：数据值。


                    }
                },

            ]

        };
        myChart2.setOption(option2);
    </script>
</body>

</html>